<template>
	<NavBar :obj="{ title: type == 1 ? '卖单详情' : '买单详情', color: '', backgroundColor: 'transparent' }" :scrollTop="scrollTop" />

	<image :src="theme?.bg?.my_order_info" mode="widthFix" class="img-top"></image>

	<view class="fill">
		<view class="status flex flex-col items-center justify-between">
			<view class="top flex items-center justify-center">
				<up-icon name="clock" color="#fff" size="23" v-if="info.status == 1 || info.status == 2"></up-icon>
				<text>{{ info.status_name }}</text>
			</view>
			<view class="status-bottom flex items-center justify-center" v-if="info.status == 1 || info.status == 2">
				<view class="abs">{{ info.status == 1 ? '打款剩余时间' : '收款剩余时间' }}</view>
				<view>
					<up-count-down :time="info.surplus_time" :format="info.status == 1 ? 'HH:mm:ss' : 'HH:mm:ss'" autoStart millisecond @change="onChange" @finish="finish">
						<view class="time">
							<view class="time__custom">
								<text class="time__custom__item">{{ timeData.hours > 10 ? timeData.hours : '0' + timeData.hours }}</text>
							</view>
							<text class="time__doc">{{ info.status == 1 ? ':' : '时' }}</text>
							<view class="time__custom">
								<text class="time__custom__item">{{ timeData.minutes > 10 ? timeData.minutes : '0' + timeData.minutes }}</text>
							</view>
							<text class="time__doc">{{ info.status == 1 ? ':' : '分' }}</text>
							<view class="time__custom">
								<text class="time__custom__item">{{ timeData.seconds > 10 ? timeData.seconds : '0' + timeData.seconds }}</text>
							</view>
							<text class="time__doc" v-if="info.status == 3">秒</text>
						</view>
					</up-count-down>
				</view>
			</view>
		</view>
		<view class="infos">
			<view class="gas">
				<view class="flex items-center line justify-between">
					<view class="line-item flex flex-col items-center justify-between">
						<text class="val rmb-black">{{ info.price }}</text>
						<text class="t">单价</text>
					</view>
					<view class="line-item flex flex-col items-center justify-between">
						<text class="val">{{ info.amount }}</text>
						<text class="t">数量</text>
					</view>
					<view class="line-item flex flex-col items-center justify-between">
						<text class="val rmb-black">{{ info.real_amount }}</text>
						<text class="t">总价值</text>
					</view>
				</view>
			</view>

			<view class="seller" v-if="info.buyer">
				<view class="big-title">买家信息</view>

				<view class="user flex items-center">
					<image :src="imgUrl + info.buyer?.photo" class="photo"></image>
					<view class="info flex-1">
						<view class="nickname">{{ info.buyer?.nickname }}</view>
						<view class="times flex items-center">
							<text>手机号：{{ info.buyer?.mobile }}</text>
							<text>ID：{{ info.buyer?.code }}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="seller" v-if="info.seller">
				<view class="big-title">卖家信息</view>

				<view class="user flex items-center">
					<image :src="imgUrl + info.seller?.photo" class="photo"></image>
					<view class="info flex-1">
						<view class="nickname">{{ info.seller?.nickname }}</view>
						<view class="times flex items-center">
							<text>手机号：{{ info.seller?.mobile }}</text>
							<text>ID：{{ info.seller?.code }}</text>
						</view>
					</view>
				</view>

				<view class="methodList" v-if="info.methodList">
					<view class="pay_way flex item justify-end">
						<view class="method flex items-center justify-between">
							<view :class="{ active: formRef.method == item.type }" class="item" v-for="(item, index) in info.methodList" :key="index" @click="changeMethod(item)">
								{{ item.title }}
							</view>
						</view>
					</view>

					<view class="col">
						<blcok v-if="formRef.method != 'bank'" class="flex items-center justify-center show">
							<view class="item flex items-center justify-between">
								<image
									:src="imgUrl + currentItem[currentItem.type + '_image']"
									mode="aspectFit"
									@click="showPreviewImage([imgUrl + currentItem[currentItem.type + '_image']])"
								></image>
							</view>
						</blcok>

						<blcok v-if="formRef.method == 'bank'">
							<view class="item flex items-center justify-between">
								<view class="left">银行名称</view>
								<view class="right">{{ currentItem.bank_name }}</view>
							</view>
							<view class="item flex items-center justify-between">
								<view class="left">开户支行</view>
								<view class="right">{{ currentItem.bank_address }}</view>
							</view>
							<view class="item flex items-center justify-between">
								<view class="left">银行账号</view>
								<view class="right">{{ currentItem.bank_address }}</view>
							</view>
							<view class="item flex items-center justify-between">
								<view class="left">银行户名</view>
								<view class="right">{{ currentItem.bank_open_name }}</view>
							</view>
						</blcok>
					</view>
				</view>
			</view>

			<view class="layout">
				<view class="item flex items-center justify-between">
					<view class="title">交易单号</view>
					<view class="val gray">
						<text>{{ info.sn }}</text>
						<text class="copy" @click="copy(info.sn)">复制</text>
					</view>
				</view>
				<view class="item flex items-center justify-between">
					<view class="title">交易时间</view>
					<view class="val gray">{{ info.create_time }}</view>
				</view>
				<view class="item flex items-center justify-between" v-if="info.method_name">
					<view class="title">打款方式</view>
					<view class="val gray">{{ info.method_name }}</view>
				</view>
				<view class="item flex items-center justify-between" v-if="info.pay_time">
					<view class="title">打款凭证</view>
					<view class="val gray" @click="showPreviewImage([imgUrl + info.images])">
						<image :src="imgUrl + info.images" class="pay_images" mode="aspectFill"></image>
					</view>
				</view>
				<view class="item flex items-center justify-between" v-if="info.pay_time">
					<view class="title">打款时间</view>
					<view class="val gray">{{ info.pay_time }}</view>
				</view>

				<view class="item flex items-center justify-between" v-if="info.receipt_time">
					<view class="title">完成时间</view>
					<view class="val gray">{{ info.receipt_time }}</view>
				</view>

				<view class="item flex items-center justify-between" v-if="info.appeal_time">
					<view class="title">申诉时间</view>
					<view class="val gray">{{ info.appeal_time }}</view>
				</view>

				<view class="item flex items-center justify-between" v-if="info.content">
					<view class="title">申诉原因</view>
					<view class="val gray">{{ info.content }}</view>
				</view>

				<view class="item flex items-center justify-between" v-if="info.appeal_img">
					<view class="title">申诉凭证</view>
					<view class="val gray" @click="showPreviewImage([imgUrl + info.appeal_img])">
						<image :src="imgUrl + info.appeal_img" class="pay_images" mode="aspectFill"></image>
					</view>
				</view>
			</view>

			<view class="images" v-if="info.status == 1">
				<view class="big-title">打款截图</view>

				<Upload v-model="files" :maxCount="1" @change="handleChange" />
			</view>

			<view class="btn" @click="payment" v-if="info.status == 1 && type == 2 && !finishOpen">
				<text>确认打款</text>
			</view>

			<view class="btn" @click="receipt" v-if="info.status == 2 && type == 1 && !finishOpen">
				<text>确认收款</text>
			</view>

			<view class="record flex items-center justify-center" v-if="info.status == 2 && type == 1" @click="goUrl('/pages/tradeOffline/appeal?id=' + info.id)">
				收款遇到问题？点击申诉
				<up-icon name="arrow-right-double" :color="theme?.themeColor" class="icon"></up-icon>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, nextTick } from 'vue';
	import { onLoad, onShow, onPageScroll } from '@dcloudio/uni-app';
	import { port, imgUrl, hint, goUrl, loading, closeLoading, showPreviewImage } from '/service/port';
	import { goBack } from '../../service/port';
	import Upload from '/components/Uploads.vue';
	import { useThemeStore } from '@/stores/theme';
	const theme = useThemeStore();
	const timeData = ref({});
	const onChange = (e) => {
		timeData.value = e;
	};
	const files = ref([]);
	const handleChange = (event) => {
		const images = files.value.map((i) => {
			return i.url;
		});
		formRef.value.images = images.length > 0 ? images.join(',') : '';
	};
	const finishOpen = ref(false);
	const finish = () => {
		finishOpen.value = true;
	};

	const id = ref('');
	const type = ref('');
	const info = ref({});
	const scrollTop = ref(0);

	const currentItem = ref({});
	const changeMethod = (item) => {
		formRef.value.method = item.type;
		currentItem.value = item;
	};
	const formRef = ref({
		method: 'bank',
		images: '',
		id: ''
	});

	const copy = (val) => {
		uni.setClipboardData({
			data: val,
			success: function () {
				hint('已复制');
			}
		});
	};

	const payment = () => {
		if (!formRef.value.images) {
			hint('请上传打款截图');
			return false;
		}
		uni.showModal({
			title: '请确认',
			content: '确定要打款吗？',
			confirmColor: theme.themeColor,
			success: async function (res) {
				if (res.confirm) {
					loading();
					let res = await port('paymentTradeOffline', formRef.value);
					setTimeout(() => {
						hint(res.msg);
						closeLoading();
						getTradeOfflineInfo();
					}, 300);
				}
			}
		});
	};

	const receipt = () => {
		uni.showModal({
			title: '请确认',
			content: '确定要收款吗？',
			confirmColor: theme.themeColor,
			success: async function (res) {
				if (res.confirm) {
					loading();
					let res = await port('receiptTradeOffline', { id: formRef.value.id });
					setTimeout(() => {
						hint(res.msg);
						closeLoading();
						getTradeOfflineInfo();
					}, 300);
				}
			}
		});
	};

	onLoad((e) => {
		if (e.id) {
			id.value = e.id;
		}
		if (e.type) {
			type.value = e.type;
		}
	});
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});
	onShow(() => {
		getTradeOfflineInfo();
	});
	async function getTradeOfflineInfo() {
		let res = await port(type.value == 1 ? 'getTradeOfflineSellInfo' : 'getTradeOfflineBuyInfo', { id: id.value });
		info.value = res.data;
		if (res.data.methodList) {
			currentItem.value = res.data.methodList[0];
		}

		formRef.value.id = info.value.id;
	}
</script>

<style scoped lang="scss">
	::v-deep {
		page {
			background-color: #f0f0f0;
		}
	}
	.record {
		color: $theme-color;
		font-size: 26rpx;
		margin: 50rpx;
		.icon {
			margin-top: 5rpx;
			margin-left: 8rpx;
		}
	}
	.pay_images {
		width: 202rpx;
		height: 202rpx;
		border-radius: 20rpx;
	}
	.btn {
		background: $theme-bg-btn-color;
		border-radius: 44rpx;
		padding: 20rpx 0;
		text-align: center;
		margin-top: 70rpx;
		> image {
			width: 20rpx;
			height: 20rpx;
			margin-right: 15rpx;
		}
		> text {
			font-weight: 500;
			font-size: 30rpx;
			color: #ffffff;
		}
	}
	.images {
		margin-top: 25rpx;
		border-radius: 18rpx;
		background: #ffffff;
		padding: 30rpx;
	}
	.seller {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
	}

	.methodList {
		background: #f6f6f6;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-top: 24rpx;
		.pay_way {
			margin-bottom: 20rpx;
			.lable {
				font-weight: 500;
				font-size: 34rpx;
				color: #000000;
				position: relative;
			}

			.method {
				gap: 14rpx;
				.item {
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					background: #ffffff;
					border-radius: 18rpx;
					padding: 10rpx 25rpx;
				}
				.active {
					font-weight: 500;
					font-size: 26rpx;
					color: $theme-color;
					background: $theme-bg-gradient-color;
					border-radius: 18rpx;
					border: 1px solid $theme-color;
				}
			}
		}
		.col {
			background: #ffffff;
			border-radius: 20rpx;
			padding: 0 30rpx;
			.item {
				padding: 20rpx 0;
				.left {
					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
				}
				.right {
					font-weight: 400;
					font-size: 26rpx;
					color: #000000;
				}
				> image {
					width: 320rpx;
					height: 320rpx;
				}
			}
		}
	}

	.user {
		.photo {
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
		}
		.info {
			margin-left: 10rpx;
			.nickname {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}
			.times {
				margin-top: 5rpx;
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
				gap: 30rpx;
			}
		}
	}

	.big-title {
		font-weight: 500;
		font-size: 34rpx;
		color: #000000;
		margin-bottom: 24rpx;
		margin-left: 5rpx;
	}
	.img-top {
		width: 100%;
		height: 350rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.layout {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-top: 24rpx;
		.total-item {
			border-top: 1rpx solid #eeeeee;
		}
		.item {
			padding-bottom: 30rpx;

			&:last-child {
				padding-bottom: 0;
			}
			.title {
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
				> text {
					font-weight: 400;
					font-size: 22rpx;
					color: #888888;
				}
			}
			.val {
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
			}
			.copy {
				color: #000;
				&:before {
					content: '|';
					color: #eeeeee;
					margin: 0 10rpx;
				}
			}
			.gray {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}
			.total {
				padding-top: 30rpx;
				.text {
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					margin-bottom: 5rpx;
				}
				.text-val {
					font-size: 34rpx;
					color: #fb3204;
				}
				.rmb:before {
					font-size: 28rpx;
				}
			}
		}
	}

	.fill {
		position: relative;
		margin: 0 30rpx;
		padding-bottom: 120rpx;
		.status {
			.top {
				> text {
					font-weight: 500;
					font-size: 36rpx;
					color: #ffffff;
					margin-left: 13rpx;
				}
			}
			.status-bottom {
				margin-top: 24rpx;
				.abs {
					font-weight: 400;
					font-size: 24rpx;
					color: #ffffff;
				}
				.time {
					@include flex;
					font-size: 26rpx;
					align-items: center;
					margin-left: 10rpx;

					&__custom {
						font-size: 26rpx;
						height: 20px;
						// background-color: #dedfe2;
						border-radius: 4px;
						/* #ifndef APP-NVUE */
						display: flex;
						/* #endif */
						justify-content: center;
						align-items: center;

						&__item {
							color: #fff;
							font-size: 26rpx;
							text-align: center;
						}
					}

					&__doc {
						color: #fff;
						padding: 0px 2px;
					}

					&__item {
						color: #fff;
						font-size: 15px;
						margin-right: 4px;
					}
				}
			}
		}
		.infos {
			.gas {
				background: #ffffff;
				border-radius: 16rpx;
				padding: 30rpx;
				margin: 50rpx 0 24rpx 0;
				.line {
					.line-item {
						margin-right: 30rpx;
						&:last-child {
							margin-right: 0;
						}
						.t {
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							margin-top: 5rpx;
						}
						.val {
							font-weight: 500;
							font-size: 34rpx;
							color: #000000;
						}
						.ml-30 {
							margin-left: 15rpx;
						}
					}
				}
			}
		}
	}
</style>
